<!--
 * @Description:  studyPlan -- 学习计划
 * @Author: your name
 * @Date: 2024-02-22
 * @LastEditTime: 2024-02-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="studyPlan heart_w">
    <div class="wrapper">
      <div class="topCon">
        <div class="leftInfo">
          <div class="userInfo">
            <img class="avatar" :src="avatar" alt="" />
            <p>{{ nickname }}</p>
            <div class="trueNum">
              <p>{{ planObj.test_bfb }} %</p>
              <p>正确率</p>
            </div>
            <div class="testNum">
              <p>{{ planObj.test_count }}</p>
              <p>答题量</p>
            </div>
          </div>
          <div class="testCountDown">
            <p>
              距离考试还剩
              <span>
                {{ planObj.ks_days }}
              </span>
              天
            </p>
          </div>
        </div>
        <div class="rightInfo">
          <ul class="nameList">
            <li></li>
            <li v-for="(item, index) in testProgressList" :key="index">
              {{ item.name }}
            </li>
          </ul>
          <div class="rightProgress">
            <div class="swiper-container" id="swiper1" style="width: 100%">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="(item, index) in testProgressList"
                  :key="index"
                >
                  <div class="item">
                    <div class="line">
                      <!-- <p>{{ item.last_time }}</p> -->
                    </div>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="
                        '计划完成' +
                        item.count +
                        '%;' +
                        '实际完成' +
                        item.bfb +
                        '%;'
                      "
                      placement="top-start"
                    >
                      <div
                        class="progress"
                        :style="{ top: 37 + index * 34 + 'px' }"
                      >
                        <div
                          class="innerPro"
                          :style="{ width: item.nums * 10 + '%' }"
                        ></div>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="missionBox">
        <div class="title">
          <p>今日任务</p>
          <div class="adjustBtn">
            <img src="@/assets/images/logo_list.png" alt="" />
            <span @click="planShow = true">调整学习计划</span>
          </div>
        </div>

        <div class="calendar">
          <p>{{ month }}</p>
          <div class="swiper-cal" style="position: relative">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  :class="{ act: presentDate == d.day }"
                  v-for="(d, i) in dayList"
                  :key="'dayList' + i"
                  style="width: 101.857px"
                  @click="presentDate = d.day"
                >
                  {{ d.day }}
                </div>
              </div>
            </div>
          </div>
          <a @click="toMore" href="javascript:void(0)">更多 》</a>
        </div>

        <div class="missionList">
          <div
            class="listItem"
            v-for="(item, index) in 2"
            :key="'miss' + index"
          >
            <h5 class="mTitle">
              <span>
                基础精讲班--Portfolio Management and Wealth Planning--Module 5
                Economics and Investment Markets
              </span>
              <span>任务数：2个</span>
              <span>预计学时：50分32秒</span>
            </h5>
            <div
              class="listUl"
              v-for="(items, indexs) in 2"
              :key="'items' + indexs"
            >
              <ul class="listCon">
                <li v-for="(e, i) in 1" :key="'task' + i">
                  <div class="left">
                    <img
                      v-if="e.type !== 1"
                      src="@/assets/images/logo_videolan.png"
                      alt=""
                    />
                    <p>M2-3 Monte Carlo Forward-Rate Simulation</p>
                  </div>
                  <div class="right">
                    <p class="time" v-if="e.type !== 1">
                      <span>22:23</span> |
                      <span v-if="e.is_finish == 1">掌握 </span>
                      <span v-else>未掌握</span>
                    </p>
                    <div class="btn" @click="toVideo(e)">开始学习</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div v-if="missionList.length !== 0">今天暂无任务</div>
        </div>
      </div>

      <!-- 调整学习计划 -->
      <setPlan v-if="planShow" @setPlanShow="setPlanShow"></setPlan>
    </div>
  </div>
</template>

<script>
import {
  getMonthDays,
  getPlanData,
  getRearrange,
  getSubjeckPlan,
  getPlanList
} from '@/api/studyPlan.js'
import { getUserData } from '@/api/header'
import setPlan from '@/components/setPlan.vue'

export default {
  name: 'studyPlan',
  components: {
    setPlan
  },
  data() {
    return {
      month: 3,
      monthDay: '',
      planObj: {},
      dayList: [],
      missionList: [],
      testProgressList: [],
      dayTaskList: [],
      planShow: false,
      presentDate: '',
      avatar: '',
      nickname: ''
    }
  },
  created() {
    this.getPlan()
    this.getDayTask()
  },
  mounted() {
    const month = new Date().getDate()
    this.monthDay = month

    new this.$swiper('#swiper1', {
      loop: false,
      slidesPerView: 4,
      observer: true,
      observeParents: true
    })
    new this.$swiper('.swiper-cal .swiper-container', {
      slidesPerView: 7,
      initialSlide: month - 1,
      observer: true,
      observeParents: true,
      loop: false
    })
    this.getData()
  },
  methods: {
    async getPlan() {
      const { data: data } = await getPlanData({ combo_id: 1 })
      this.planObj = data.data
      getSubjeckPlan({ combo_id: 2 }).then(({ data: data }) => {
        this.testProgressList = data.data
      })
      getUserData().then(({ data: data }) => {
        this.nickname = data.data.nickname
        this.avatar = data.data.avatar
      })
    },
    async getDayTask() {
      const { data: data } = await getPlanList({
        day: '2024-06-04',
        // day: this.presentDate,  // 默认获取当天
        combo_id: 2
      })
      this.dayTaskList = data.data.list
      console.log(data.data, '今日任务')
    },
    bvtbs() {
      this.$message({
        showClose: false,
        message: '错了哦，这是一条错误消息',
        type: 'error',
        duration: 3000,
        iconClass: 'el-icon-loading'
      })
    },
    toMore() {},
    async getData() {
      const year = new Date().getFullYear()
      const month = new Date().getMonth() + 1
      const dayTime = new Date().getDate().toString().padStart(2, '0')
      let dateTimer = year + '-' + month
      this.presentDate = year + '-' + month + '-' + dayTime

      let params = {
        month: dateTimer,
        combo_id: 1
      }
      const { data: data } = await getMonthDays(params)
      if (data.code == 1) {
        this.dayList = data.data.list
        this.month = data.data.month
      }
    },
    setPlanShow(val) {
      this.planShow = val
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/studyPlan.scss';
.studyPlan {
  margin-top: 80px;
}
</style>
